<template>
  <div
      id="code-editor"
      ref="codeEditorRef"
      class="code-editor-container"
  />
</template>

<script setup lang="ts">
import * as monaco from "monaco-editor";
import {defineExpose, defineProps, onMounted, ref, toRaw, watch, withDefaults} from "vue";

/**
 * 定义组件属性类型
 */
interface Props {
  value: string;
  language?: string;
  handleChange: (v: string) => void;
  readonly?: boolean;
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  language: () => "java",
  handleChange: (v: string) => {
    console.log(v);
  },
  readonly: () => false,
});

const codeEditorRef = ref();
const codeEditor = ref();

// 添加格式化代码的方法
const formatCode = () => {
  if (codeEditor.value) {
    codeEditor.value.getAction('editor.action.formatDocument').run();
  }
};

watch(
    () => props.language,
    () => {
      if (codeEditor.value) {
        monaco.editor.setModelLanguage(
            toRaw(codeEditor.value).getModel(),
            props.language
        );
      }
    }
);

onMounted(() => {
  if (!codeEditorRef.value) {
    return;
  }

  // 创建编辑器时添加代码提示相关配置
  codeEditor.value = monaco.editor.create(codeEditorRef.value, {
    value: props.value,
    language: props.language,
    automaticLayout: true,
    colorDecorators: true,
    minimap: {
      enabled: true,
    },
    readOnly: props.readonly,
    theme: "vs",
    scrollBeyondLastLine: false,
    scrollbar: {
      vertical: 'visible',
      horizontal: 'visible',
      useShadows: false,
      verticalScrollbarSize: 10,
      horizontalScrollbarSize: 10
    },
    // 添加智能提示相关配置
    quickSuggestions: {
      other: true,
      comments: true,
      strings: true
    },
    suggestOnTriggerCharacters: true,
    acceptSuggestionOnEnter: "on",
    tabCompletion: "on",
    wordBasedSuggestions: 'matchingDocuments',
    parameterHints: {
      enabled: true
    },
    suggest: {
      showIcons: true,
      showStatusBar: true,
      showInlineDetails: true,
      preview: true,
      previewMode: 'prefix',
      filterGraceful: true,
      snippetsPreventQuickSuggestions: false,
    },
    // 修改建议窗口的样式
    suggestFontSize: 13,
    suggestLineHeight: 22,
    // 添加格式化相关配置
    formatOnPaste: true,
    formatOnType: true,
  });

  // 编辑 监听内容变化
  codeEditor.value.onDidChangeModelContent(() => {
    props.handleChange(toRaw(codeEditor.value).getValue());
  });
});

// 添加watch来监听readonly属性变化
watch(
    () => props.readonly,
    (newValue) => {
      if (codeEditor.value) {
        codeEditor.value.updateOptions({
          readOnly: newValue
        });
      }
    }
);

// 将formatCode方法暴露给父组件
defineExpose({
  formatCode
});
</script>

<style scoped>
.code-editor-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep(.monaco-editor),
:deep(.monaco-editor .monaco-editor-background),
:deep(.monaco-editor .inputarea.ime-input),
:deep(.monaco-editor .margin),
:deep(.monaco-editor-background),
:deep(.monaco-editor .lines-content),
:deep(.monaco-editor .view-line span) {
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

:deep(.monaco-editor .line-numbers) {
  font-size: 13px !important;
}

/* 代码提示框基础样式 */
:deep(.suggest-widget) {
  border: 1px solid rgb(51, 122, 183) !important;
  background-color: #fff !important;
  color: #000 !important;
}

/* 提示列表容器 */
:deep(.suggest-widget .tree) {
  background-color: #fff !important;
}

/* 提示项样式 */
:deep(.suggest-widget .monaco-list .monaco-list-row) {
  padding: 0 4px !important;
  line-height: 22px !important;
}

/* 提示项选中状态 */
:deep(.suggest-widget .monaco-list .monaco-list-row.focused) {
  background-color: rgb(51, 122, 183) !important;
  color: #fff !important;
}

/* 提示项图标 */
:deep(.suggest-widget .monaco-list .monaco-list-row .suggest-icon) {
  background-image: none !important;
  margin-right: 4px !important;
}

/* 提示项文本 */
:deep(.suggest-widget .monaco-list .monaco-list-row:not(.focused) .monaco-highlighted-label) {
  color: #000 !important;
}

:deep(.suggest-widget .monaco-list .monaco-list-row.focused .monaco-highlighted-label) {
  color: #fff !important;
}

/* 匹配文本高亮 */
:deep(.suggest-widget .monaco-list .monaco-list-row:not(.focused) .highlight) {
  color: rgb(51, 122, 183) !important;
}

:deep(.suggest-widget .monaco-list .monaco-list-row.focused .highlight) {
  color: #fff !important;
}

/* 移除默认边框和阴影 */
:deep(.suggest-widget.visible) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* 调整提示框位置 */
:deep(.suggest-widget.visible) {
  margin-left: 0 !important;
}

/* 隐藏不需要的元素 */
:deep(.suggest-widget .message) {
  display: none !important;
}

:deep(.suggest-widget .monaco-list .monaco-list-row .readMore) {
  display: none !important;
}
</style>
